<template>
   <div>
      <el-row class="home" :gutter="20">
         <!-- 左半部分区域内容 -->
         <el-col :span="8" style="margin-top:20px;">
            <!-- 左上方用户登录信息 -->
            <el-card shadow="hover">
               <div class="user">
                  <img :src="userImg" />
                  <div class="userinfo">
                     <p class="name">Admin</p>
                     <p class="access">超级管理员</p>
                  </div>
               </div>
               <hr>
               <div class="login-info">
                  <p>上次登录时间: <span>2021-7-19</span> </p>
                  <p>上次登录地点: <span>武汉</span> </p>
               </div>
            </el-card>

            <!-- 左下方商品购买信息 -->
            <el-card style="margin-top:20px; height:460px;">
               <el-table :data="tableData">
                  <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
                  </el-table-column>
               </el-table>
            </el-card>
         </el-col>

         <!-- 右半部分区域内容 -->
         <el-col :span="16">
            <!-- 右上方今日订单信息 -->
            <div class="Top-right">
               <el-card class="card" v-for="item in countData" :key="item.name"
                  :body-style="{ display: 'flex', padding: 0 }">
                  <i class="icon" :class="`el-icon-+${item.icon}`" :style="{ background: item.color }"></i>
                  <div class="detail">
                     <p class="num">￥{{ item.value }}</p>
                     <p class="txt">￥{{ item.name }}</p>
                  </div>

               </el-card>
            </div>

            <!-- 中间折线图 -->
            <el-card class="middle">
               <echart :chartData="echartData.order" style="height: 280px;"></echart>
               <!-- <div
            style="height: 280px;"
            ref="echarts"
          ></div> -->
            </el-card>

            <!-- 右下方柱状图与饼图 -->
            <div class="graph">
               <!-- 柱状图 -->
               <el-card class="card1">
                  <echart :chartData="echartData.user" style="height: 240px;"></echart>
                  <!-- <div
              style="height: 240px;"
              ref="userEcharts"
            ></div> -->
               </el-card>
               <!-- 饼图 -->
               <el-card class="card2">
                  <echart :chartData="echartData.video" :isAxisChart="false" style="height: 240px;"></echart>
                  <!-- <div
              style="height:240px;"
              ref="videoEcharts"
            ></div> -->
               </el-card>
            </div>
         </el-col>
      </el-row>

   </div>
</template>

<script>
import { getData } from '../../api/data.js'
// import * as echarts from 'echarts'
import Echart from '@/components/ECharts.vue'

export default {
   name: 'Home',
   components: {
      Echart
   },
   data() {
      return {
         userImg: require('/src/assets/images/user.jpg'),
         // 课程表格数据
         // 折线图数据
         tableData: [],
         tableLabel: {
            name: '课程',
            todayBuy: '今日购买',
            monthBuy: '本月购买',
            totalBuy: '总购买'
         },
         countData: [
            {
               name: '今日已经支付订单',
               value: 1234,
               icon: 'success',
               color: '#2ec7c9'
            },
            {
               name: '今日收藏订单1',
               value: 210,
               icon: 'star-on',
               color: '#ffb980'
            },
            {
               name: '今日未支付订单1',
               value: 1800,
               icon: 's-goods',
               color: '#5ab1ef'
            },
            {
               name: '今日支付订单1',
               value: 166,
               icon: 'success',
               color: '#2ec7c9'
            },
            {
               name: '今日收藏订单2',
               value: 333,
               icon: 'success',
               color: '#2ec7c9'
            },
            {
               name: '今日未支付订单2',
               value: 444,
               icon: 's-goods',
               color: '#5ab1ef'
            }
         ],
         echartData: {
            order: { xData: [], series: [] },
            user: { xData: [], series: [] },
            video: { series: [] }
         }
      }
   },
   mounted() {
      getData().then((res) => {
         const { code, data } = res.data
         if (code === 20000) {
            this.tableData = data.tableData
            const order = data.orderData
            const xData = order.date
            const keyArray = Object.keys(order.data[0])
            const series = []
            keyArray.forEach((key) => {
               series.push({
                  name: key,
                  data: order.data.map((item) => item[key]),
                  type: 'line'
               })
            })
            // 折线图配置
            //#region
            // 折线图配置
            // const option = {
            //   tooltip: {
            //     trigger: 'item'
            //   },
            //   xAxis: {
            //     data: xData
            //   },
            //   yAxis: {},
            //   legend: {
            //     data: keyArray
            //   },
            //   series
            // }
            // const E = echarts.init(this.$refs.echarts)
            // E.setOption(option)
            //#endregion
            this.echartData.order.xData = xData
            this.echartData.order.series = series
               //#region
               // 用户柱状图配置
               // const userOption = {
               //   legend: {
               //     // 图例文字颜色
               //     textStyle: {
               //       color: '#333'
               //     }
               //   },
               //   grid: {
               //     left: '20%'
               //   },
               //   // 提示框:
               //   tooltip: {
               //     trigger: 'axis'
               //   },
               //   xAxis: {
               //     type: 'category', //类目轴
               //     data: data.userData.map((item) => item.date),
               //     axisLine: {
               //       lineLine: {
               //         color: '#17b3a3'
               //       }
               //     },
               //     axisLabel: {
               //       interval: 0,
               //       color: '#333'
               //     }
               //   },
               //   yAxis: [
               //     {
               //       type: 'value',
               //       axisLine: {
               //         lineStyle: {
               //           color: '#17b3a3'
               //         }
               //       }
               //     }
               //   ],
               //   color: ['#2ec7c9', '#b6a2de'],
               //   series: [
               //     {
               //       name: '新增用户',
               //       data: data.userData.map((item) => item.new),
               //       type: 'bar'
               //     },
               //     {
               //       name: '活跃用户',
               //       data: data.userData.map((item) => item.active),
               //       type: 'bar'
               //     }
               //   ]
               // }
               // const U = echarts.init(this.$refs.userEcharts)
               // U.setOption(userOption)
               //#endregion
               // 柱状图配置
               ; (this.echartData.user.xData = data.userData.map((item) => item.date)),
                  (this.echartData.user.series = [
                     {
                        name: '新增用户',
                        data: data.userData.map((item) => item.new),
                        type: 'bar'
                     },
                     {
                        name: '活跃用户',
                        data: data.userData.map((item) => item.active),
                        type: 'bar'
                     }
                  ])
            //#region
            // 饼图配置
            // const videoOption = {
            //   tooltip: {
            //     trigger: 'item'
            //   },
            //   color: [
            //     '#0f78f4',
            //     '#dd536b',
            //     '#9462e5',
            //     '#a6a6a6',
            //     '#e1bb22',
            //     '#39c362',
            //     '#3ed1cf'
            //   ],
            //   series: [
            //     {
            //       data: data.videoData,
            //       type: 'pie'
            //     }
            //   ]
            // }
            // const V = echarts.init(this.$refs.videoEcharts)
            // V.setOption(videoOption)
            //#endregion
            // 饼图配置
            this.echartData.video.series = [
               {
                  data: data.videoData,
                  type: 'pie'
               }
            ]
         }
         console.log(res, 'response')
      })
   }
}
</script>

<style lang="less" scoped>
.user {
   position: relative;
}

.userinfo {
   position: absolute;
   top: 0;
   right: 100px;
   line-height: 10px;

   .name {
      font-size: 35px;
      margin-top: 50%;
   }

   .access {
      font-size: 18px;
      color: gray;
   }

   text-align: center;
}

// 今日订单信息样式
.Top-right {
   display: flex;
   width: 98%;
   justify-content: flex-start;
   flex-wrap: wrap;

   .card {
      flex: 1;
      height: 100px;
      width: calc((100% - 10px) / 3); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 66px) / 3); // 加入这两个后每个item的宽度就生效了
      max-width: calc((100% - 66px) / 3); // 加入这两个后每个item的宽度就生效了
      background: skyblue;
      margin: 20px 20px 0 0;

      .detail {
         height: 100px;
         position: relative;
         left: 50%;
         transform: translateX(-50%);
         background: #bfa;
         text-align: center;
      }
   }
}

// 中间折线图样式
.middle {
   height: 280px;
   margin-top: 20px;
}

.graph {
   display: flex;
   justify-content: space-around;
   margin-top: 20px;

   .card1 {
      height: 260px;

      flex: 1;
      width: 100px;
      margin-right: 50px;
   }

   .card2 {
      height: 260px;

      flex: 1;
      width: 100px;
   }
}
</style>